import React from 'react';
import { connect } from 'dva/index';
import { Button, Col, DatePicker, Form, Input, Row, Table, Checkbox } from 'antd';
import Constants from '../../utils/Constants';
import RightConstants from '../../utils/RightConstants';
import RevenueDetail from '../../components/finance/revenueDetail';
import RightBox from '../../components/common/rightBox';

const { RangePicker } = DatePicker;
const statusArr = ['删除', '草稿', '可认领'];
const FormItem = Form.Item;
const R = require("ramda");
const CheckboxGroup = Checkbox.Group;

const revenue = Form.create()(class Revenue extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.props.dispatch({ type: 'revenue/getListForPage', payload: { ...R.pick(['page', 'size'], Constants.DEFAULT_PAGE), status: 2 } });
    }

    // claim : true 代表认领动作打开窗口
    handleOpen = (id, disabled, claim, currency) => {
        this.props.dispatch({
            type: 'revenue/getRevenueById',
            payload: { id }
        });

        //查询已锁定的费用
        this.props.dispatch({
            type: 'revenue/getListByBevenueId',
            payload: {
                revenueId: id,
                ...R.pick(['page', 'size'], Constants.DEFAULT_PAGE)
            }
        });

        //查询可认领的费用
        if (claim)
            this.props.dispatch({
                type: 'revenue/getUnClaimForPage',
                payload: {
                    revenueId: id,
                    currency,
                    ...R.pick(['page', 'size'], Constants.DEFAULT_PAGE)
                }
            });

        this.revenueDetail.handleOpen(disabled, claim, false);
    }

    handleSearch = (flag) => {
        let values = this.props.form.getFieldsValue();
        values.receiveBegin = R.isNil(values.receiveTime) || R.isEmpty(values.receiveTime) ? null : values.receiveTime[0].format(Constants.DATEFORMAT);
        values.receiveEnd = R.isNil(values.receiveTime) || R.isEmpty(values.receiveTime) ? null : values.receiveTime[1].format(Constants.DATEFORMAT);
        values.never = values.condition && values.condition.includes("never");
        values.balance = values.condition && values.condition.includes("balance");
        values.done = values.condition && values.condition.includes("done");
        values.condition = undefined;
        let newPage = R.pick(['page', 'size'], this.props.revenue.page);
        if (flag) newPage.page = 1;
        this.props.dispatch({
            type: 'revenue/getListForPage',
            payload: {
                ...values,
                ...newPage,
                status: 2
            }
        });
    };

    handleDelete = id => {
        this.props.dispatch({
            type: 'revenue/deleteRevenueById',
            payload: {
                id,
                onSuccess: this.handleSearch
            }
        })
    }
    columns = [
        { title: '流水号', dataIndex: 'seqNo', key: 'seqNo' },
        { title: '凭证编号', dataIndex: 'selfNo', key: 'selfNo' },
        { title: '付款人名称', dataIndex: 'name', key: 'name' },
        { title: '来账账号', dataIndex: 'account', key: 'account' },
        { title: '来账银行', dataIndex: 'bank', key: 'bank' },
        { title: '币种', dataIndex: 'currency', key: 'currency' },
        { title: '来账金额', dataIndex: 'amount', key: 'amount' },
        { title: '余额', dataIndex: 'balance', key: 'balance' },
        /* { title: '状态', key: 'status', render: (text, record, index) => { return <span>{statusArr[record.status]}</span> } }, */
        {
            title: '操作', key: 'key_oprator',
            render: (text, record, index) => {
                let claimLink = <a href="#" onClick={this.handleOpen.bind(this, record.id, true, true, record.currency)}>认领</a>
                claimLink = <RightBox resource={RightConstants.REVENUE.REVENUE_CLAIM} split={true}>{claimLink}</RightBox>
                let viewLink = <a href="#" onClick={this.handleOpen.bind(this, record.id, true, false, record.currency)}>查看</a>
                return <span>{claimLink}{viewLink}</span>;
            }
        }
    ];

    render() {
        let formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 16 } };
        const { getFieldDecorator } = this.props.form;
        let values = this.props.form.getFieldsValue();
        values.never = values.condition && values.condition.includes("never");
        values.balance = values.condition && values.condition.includes("balance");
        values.done = values.condition && values.condition.includes("done");
        values.condition = undefined;
        let pagination = {
            showTotal: total => `共 ${total} 条数据`,
            pageSize: this.props.revenue.page.size,
            current: this.props.revenue.page.page,
            total: this.props.revenue.page.totalRow,
            showSizeChanger: true,
            onShowSizeChange: (current, size) => {
                let newPage = R.pick(['page', 'size'], this.props.revenue.page);
                newPage.size = size;
                newPage.page = 1;
                this.props.dispatch({
                    type: 'revenue/getListForPage',
                    payload: {
                        ...values,
                        ...newPage,
                        status: 2
                    }
                });
            },
            onChange: (pageNumber, pageSize) => {
                let newPage = R.pick(['page', 'size'], this.props.revenue.page);
                newPage.page = pageNumber;
                this.props.dispatch({
                    type: 'revenue/getListForPage',
                    payload: {
                        ...values,
                        ...newPage,
                        status: 2
                    }
                });
            }
        }

        return (
            <div>
                <Row>
                    <Col span={8}><FormItem {...formItemLayout} label={'客户名称'}>{getFieldDecorator('name')(<Input />)}</FormItem></Col>
                    <Col span={8}><FormItem {...formItemLayout} label={'凭证编号'}>{getFieldDecorator('selfNo')(<Input />)}</FormItem></Col>
                </Row>
                <Row>
                    <Col span={8}><FormItem {...formItemLayout} label={'来账账号'}>{getFieldDecorator('account')(<Input />)}</FormItem></Col>
                    <Col span={8}><FormItem {...formItemLayout} label={'来账金额'}>{getFieldDecorator('amount')(<Input />)}</FormItem></Col>
                </Row>
                <Row>
                    <Col span={8}>
                        <FormItem {...formItemLayout} label={'来账时间'}>
                            {getFieldDecorator('receiveTime')(
                                <RangePicker
                                    style={{ width: '100%' }}
                                    showTime={{ format: 'YYYY-MM-DD' }}
                                    format="YYYY-MM-DD"
                                    placeholder={['开始时间', '结束时间']}
                                />
                            )}
                        </FormItem>
                    </Col>
                    <Col span={8}>
                        <FormItem {...formItemLayout} label={'余额情况'} >
                            {getFieldDecorator('condition')
                                (<CheckboxGroup style={{ width: '100%' }}>
                                    <Checkbox value="never">从未认领</Checkbox>
                                    <Checkbox value="balance">可认领</Checkbox>
                                    <Checkbox value="done">认领完毕</Checkbox>
                                </CheckboxGroup>)}
                        </FormItem>
                    </Col>
                    <Col span={7} style={{ marginLeft: 24 }}>
                        <Button type="primary" icon="search" style={{ marginRight: 5 }} onClick={this.handleSearch.bind(this, true)}>查询</Button>
                    </Col>
                </Row>

                <Table loading={this.props.loading} rowKey='id' dataSource={this.props.revenue.list} columns={this.columns} bordered={true} size={'middle'} pagination={pagination} />
                <RevenueDetail wrappedComponentRef={(inst) => this.revenueDetail = inst} refreshList={this.handleSearch} />
            </div>
        );
    }
})

function mapStateToProps(state) {
    return {
        loading: state.loading.models.revenue, revenue: state.revenue
    };
}

export default connect(mapStateToProps)(revenue);
